<template>
  <div>
    <MainLayout :idx="0">
      <el-container slot="container" class="full-height">
        <!-- 左侧侧边栏 -->
        <el-aside width="320px" class="aside-box">
          <el-container class="full-height" direction="vertical">
            <!-- 搜索栏 -->
            <el-header height="60px" class="header">
              <div class="from-search">
                <el-input
                  v-model="queryParams.chatListReceiverName"
                  @input="queryMyChatUsersChatListPageResList()"
                  prefix-icon="el-icon-search"
                  placeholder="搜索聊天 / 好友 / 群组"
                  size="small"
                />
              </div>
              <!-- 工具栏 -->
              <div class="tools" v-outside="closeSubMenu">
                <el-button
                  circle
                  plain
                  size="small"
                  icon="el-icon-plus"
                  @click="subMenu = !subMenu"
                />
                <transition name="el-zoom-in-top">
                  <div class="tools-menu" v-show="subMenu">
                    <div class="menu-item" @click="triggerSubMenu(1)">
                      创建群组
                    </div>
                    <div class="menu-item" @click="triggerSubMenu(2)">
                      添加好友
                    </div>
                  </div>
                </transition>
              </div>
            </el-header>

            <!-- 置顶栏 -->
            <el-header v-show="loadStatus == 1 && topItems.length > 0" class="subheader" :class="{ shadow: subHeaderShadow }" :height="subHeaderPx">
              <div v-for="item in topItems" :key="item.indexName" class="top-item" @click="clickTab(item.indexName)" @contextmenu.prevent="topItemsMenu(item, $event)">
                <el-tooltip effect="dark"  placement="top-start" :content="item.friendRemark ? item.friendRemark : item.realName">
                  <div class="avatar">
                    <span v-show="!item.headPortrait">
                      {{
                        (item.friendRemark
                          ? item.friendRemark
                          : item.realName
                        ).substr(0, 1)
                      }}
                    </span>
                    <img v-show="item.headPortrait" :src="item.headPortrait" :onerror="$store.state.defaultAvatar"/>
                  </div>
                </el-tooltip>

                <div class="name" :class="{ active: indexName == item.indexName }">
                  {{ item.friendRemark ? item.friendRemark : item.realName }}
                </div>
              </div>
            </el-header>

            <!-- 对话列表栏 -->
            <el-scrollbar tag="section" ref="menusScrollbar" class="full-height" :native="false">
              <el-main class="main">
                <p v-show="loadStatus == 0" class="empty-data">
                  <i class="el-icon-loading" /> 数据加载中...
                </p>

                <p v-show="loadStatus == 1 && talkNum == 0" class="empty-data">
                  暂无聊天消息
                </p>

                <p v-show="loadStatus == 1 && talkNum > 0" class="main-menu">
                  <span>会话记录 ({{ talkNum }})</span>
                </p>

                <!-- 对话列表 -->
                <template v-if="loadStatus == 1">
                  <div
                    v-for="item in talkItems"
                    :key="item.indexName"
                    class="talk-item pointer"
                    :class="{ active: indexName == item.indexName }"
                    @click="clickTab(item.indexName)"
                    @contextmenu.prevent="talkItemsMenu(item, $event)"
                  >
                    <div class="avatar-box">
                      <span v-show="!item.headPortrait">
                        {{
                          (item.friendRemark
                            ? item.friendRemark
                            : item.realName
                          ).substr(0, 1)
                        }}
                      </span>
                      <img v-show="item.headPortrait" :src="item.headPortrait" :onerror="$store.state.defaultAvatar"/>
                      <div v-show="item.isTop == 0" class="top-mask" @click.stop="topChatItem(item)">
                        <i class="el-icon-top" />
                      </div>
                    </div>
                    <div class="card-box">
                      <div class="title">
                        <div class="card-name">
                          <p class="nickname">
                            {{
                            item.friendRemark ? item.friendRemark : item.realName
                            }}
                          </p>
                          <div v-show="item.unreadNum" class="larkc-tag">
                            {{ item.unreadNum }}条未读
                          </div>
                          <div v-show="item.isTop" class="larkc-tag top">
                            TOP
                          </div>

                          <div v-show="item.isRobot" class="larkc-tag top">
                            BOT
                          </div>

                          <div
                            v-show="item.talkType == 2"
                            class="larkc-tag group"
                          >
                            群组
                          </div>
                          <div
                            v-show="item.isDisturb"
                            class="larkc-tag disturb"
                          >
                            <i class="iconfont el-icon-close-notification" />
                          </div>
                        </div>
                        <div class="card-time">
                          {{ beautifyTime(item.updateTime) }}
                        </div>
                      </div>
                      <div class="content">
                        <template v-if="indexName != item.indexName && item.draftText">
                          <span class="draft-color">[草稿]</span>
                          <span>{{ item.draftText }}</span>
                        </template>
                        <template v-else>
                          <template v-if="item.isRobot == 0">
                            <span v-if="item.talkType == 1" :class="{ 'online-color': item.isOnline == 1 }">
                              [{{ item.isOnline == 1 ? '在线' : '离线' }}]
                            </span>
                            <span v-else>[群消息]</span>
                          </template>
                          <span>{{ item.msgText }}</span>
                        </template>
                      </div>
                    </div>
                  </div>
                </template>
              </el-main>
            </el-scrollbar>
          </el-container>
        </el-aside>

        <!-- 聊天面板容器 -->
        <el-main class="ov-hidden full-height no-padding" >
          <WelcomeModule v-if="indexName == null" />
          <TalkPanel
            v-else
            class="full-height"
            :params="params"
            :isOnline="isFriendOnline"
            @change-talk="changeTalk"
            @close-talk="closeTalk"
          />
        </el-main>
      </el-container>
    </MainLayout>
    <!-- 创建群聊组件 -->
    <GroupLaunch
      v-if="launchGroupShow"
      @close="launchGroupShow = false"
      @create-success="groupChatSuccess"
    />
    <!-- 用户查询组件 -->
    <UserSearch ref="searchUsers" />
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import MainLayout from '@/views/duojuhe/chat/MainLayout'
import WelcomeModule from '@/components/DuoJuHe/Chat/layout/WelcomeModule'
import GroupLaunch from '@/components/DuoJuHe/Chat/group/GroupLaunch'
import TalkPanel from '@/components/DuoJuHe/Chat/chat/panel/TalkPanel'
import UserSearch from '@/components/DuoJuHe/Chat/user/UserSearch'
import {
  queryMyChatUsersChatListPageResList,
  setTopChatUsersChatListById,
  setDisturbChatUsersChatList,
  deleteChatUsersChatListById,
  clearUnreadNumChatUsersChatList
} from '@/api/chat/im/chatList'


import { removeChatFriendByFriendId, updateFriendRemark } from '@/api/chat/im/chatUsersFriends'
import { secedeChatGroupByGroupId } from '@/api/chat/im/chatGroup'
import { beautifyTime } from '@/utils/functions'
import { formateTalkItem, findTalkIndex, getCacheIndexName } from '@/utils/talk'
const title = document.title
//默认查询参数
let defaultQueryParams = {
  chatListReceiverName: undefined,
  page: 1,
  rows: 0
}
export default {
  name: 'MessagePage',
  components: {
    GroupLaunch,
    MainLayout,
    TalkPanel,
    UserSearch,
    WelcomeModule,
  },
  data() {
    return {
      subHeaderShadow: false,
      launchGroupShow: false,
      // 分页查询参数
      queryParams: { ...defaultQueryParams },
      // 对话面板的传递参数
      params: {
        talkType: 0,
        receiverId: 0,
        realName: '',
      },
      // header 工具菜单
      subMenu: false,
      // 对话消息列表加载状态[0:加载中;1:加载完成;2:加载失败;]
      loadStatus: 0,
      // 消息未读数计时器
      interval: null,
    }
  },
  computed: {
    ...mapGetters(['topItems', 'talkItems', 'unreadNum', 'talkNum']),
    ...mapState({
      talks: state => state.talks.items,
      unreadNum: state => state.notify.unreadNum,
      applyNum: state => state.notify.applyNum,
      indexName: state => state.dialogue.indexName,
      monitorFriendsStatus: state => state.notify.friendStatus,
    }),

    // 计算置顶栏目的高度
    subHeaderPx() {
      const n = 7 // 一排能显示的用户数
      const num = this.topItems.length
      let len = 60
      if (num > n) {
        len = (Math.floor(num / n) + (num % n > 0 ? 1 : 0)) * len
      }
      return `${len}px`
    },

    // 当前对话好友在线状态
    isFriendOnline() {
      let index = findTalkIndex(this.indexName)
      return index >= 0 && this.talks[index].isOnline == 1
    },
  },
  watch: {
    unreadNum(value) {
      //clearInterval(this.interval)
      this.$store.commit('SET_UNREAD_NUM', value)
    },

    // 监听好友在线状态
    monitorFriendsStatus(value) {
      this.$store.commit('UPDATE_TALK_ITEM', {
        indexName: `1_${value.friendId}`,
        isOnline: value.status,
      })
    },
  },
  beforeRouteUpdate(to, from, next) {
    let indexName = getCacheIndexName()
    if (indexName) this.clickTab(indexName)
    next()
  },
  created() {
    this.queryMyChatUsersChatListPageResList()
  },
  mounted() {
    this.scrollEvent()
  },
  destroyed() {
    document.title = title
    clearInterval(this.interval)
    this.clearTalk()
  },
  methods: {
    // 美化时间格式
    beautifyTime,
    // header 功能栏隐藏事件
    closeSubMenu() {
      this.subMenu = false
    },
    // 清除当前对话
    clearTalk() {
      this.params = {
        talkType: 0,
        receiverId: 0,
        realName: '',
      }
      this.$store.commit('UPDATE_DIALOGUE_MESSAGE', {
        talkType: 0,
        receiverId: 0,
        isRobot: 0,
      })
    },

    // 工具栏事件
    triggerSubMenu(stype) {
      this.closeSubMenu()
      if (stype === 1) {
        this.launchGroupShow = true
      } else {
        this.$refs.searchUsers.open()
      }
    },

    // 监听自定义滚动条事件
    scrollEvent() {
      let scrollbarEl = this.$refs.menusScrollbar.wrap
      scrollbarEl.onscroll = () => {
        this.subHeaderShadow = scrollbarEl.scrollTop > 0
      }
    },

    /** 分页查询我的会话列表 */
    queryMyChatUsersChatListPageResList() {
      this.loadStatus = this.talkNum === 0 ? 0 : 1
      queryMyChatUsersChatListPageResList(this.queryParams).then(res => {
         //beg
          let data = res.data.records
          //未读数量
          let unreadChatMessageNum = 0
          for(let i in data) {
            unreadChatMessageNum = unreadChatMessageNum+data[i].unreadNum
          }
          //无效的
          //this.$store.commit('SET_UNREAD_NUM', 0)
          //计算总的未读数量
          this.$store.commit('SET_UNREAD_NUM', unreadChatMessageNum)

          this.$store.commit('SET_TALK_ITEMS', {
            items: data.map(item => formateTalkItem(item)),
          })
          let indexName = sessionStorage.getItem('send_message_index_name')
          if (indexName) {
            this.$nextTick(() => this.clickTab(indexName))
            sessionStorage.removeItem('send_message_index_name')
          }
         //end
        }
      ).finally(() => {
        //关闭加载特效
        this.loadStatus = 1
      })
    },

    // 发起群聊成功后回调方法
    groupChatSuccess(data) {
      this.launchGroupShow = false
      sessionStorage.setItem('send_message_index_name', `2_${data.groupId}`)
      this.queryMyChatUsersChatListPageResList()
    },

    // 切换聊天栏目
    clickTab(indexName) {
      let index = findTalkIndex(indexName)
      if (index === -1) return
      let item = this.talks[index]
      let [talkType, receiverId] = indexName.split('_')
      let realName = item.friendRemark ? item.friendRemark : item.realName
      this.params = {
        talkType,
        receiverId,
        realName,
        isRobot: item.isRobot,
      }
      this.$store.commit('UPDATE_DIALOGUE_MESSAGE', {
        talkType,
        receiverId,
        isRobot: item.isRobot,
      })
      let itemUnreadNum = item.unreadNum;
      this.$nextTick(() => {
        if (indexName == this.indexName) {
          this.$store.commit('UPDATE_TALK_ITEM', {
            indexName,
            unreadNum: 0,
          })

          //改变title
        /*  this.totalUnreadNum = this.totalUnreadNum-itemUnreadNum;
          if (this.totalUnreadNum<=0){
            console.log(title)
            document.title = title
          }*/
          // 清空消息未读数(后期改成WebSocket发送消息)
          clearUnreadNumChatUsersChatList({talkType:talkType,receiverId: receiverId})
        }
      })
    },

    // 修改当前对话
    changeTalk(indexName) {
      sessionStorage.setItem('send_message_index_name', indexName)
      this.queryMyChatUsersChatListPageResList()
    },

    // 关闭当前对话及刷新对话列表
    closeTalk() {
      this.$store.commit('UPDATE_DIALOGUE_MESSAGE', {
        talkType: 0,
        receiverId: 0,
        isRobot: 0,
      })
      this.queryMyChatUsersChatListPageResList()
    },

    // 对话列表的右键自定义菜单
    talkItemsMenu(item, event) {
      let items = {
        items: [
          {
            label: '好友信息',
            icon: 'el-icon-user',
            disabled: item.talkType === 2 || item.isRobot === 1,
            hidden:item.talkType === 2 || item.isRobot === 1,
            onClick: () => {
              this.$user(item.receiverId)
            },
          },
          {
            label: '修改备注',
            icon: 'el-icon-edit-outline',
            disabled: item.talkType === 2 || item.isRobot === 1,
            hidden:item.talkType === 2 || item.isRobot === 1,
            onClick: () => {
              this.editFriendRemarks(item)
            },
          },
          {
            label: item.isTop === 0 ? '会话置顶' : '取消置顶',
            icon: 'el-icon-top',
            onClick: () => {
              this.topChatItem(item)
            },
          },
          {
            label: item.isDisturb == 0 ? '消息免打扰' : '开启消息提示',
            icon:
              item.isDisturb == 0
                ? 'el-icon-close-notification'
                : 'el-icon-bell',
            disabled: item.isRobot == 1,
            onClick: () => {
              this.setNotDisturb(item)
            },
          },
          {
            label: '移除会话',
            icon: 'el-icon-remove-outline',
            divided: true,
            onClick: () => {
              this.delChatItem(item)
            },
          },
          {
            label: item.talkType == 1 ? '删除好友' : '退出群聊',
            icon: 'el-icon-delete',
            disabled: item.isRobot == 1,
            onClick: () => {
              let title = item.talkType == 1 ? '删除好友' : '退出群聊'
              this.$confirm(
                `此操作将 <span style="color:red;font-size:16px;">${title}</span>, 是否继续?`,
                '提示',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true,
                  dangerouslyUseHTMLString: true,
                }
              ).then(() => {
                if (item.talkType == 1) {
                  this.removeFriend(item)
                } else {
                  this.removeGroup(item)
                }
              })
            },
          },
        ],
        event: event,
        zIndex: 3,
      }

      this.$contextmenu(items)
      return false
    },

    // 置顶栏右键菜单栏
    topItemsMenu(item, event) {
      this.$contextmenu({
        items: [
          {
            label: item.isTop == 0 ? '会话置顶' : '取消置顶',
            icon: 'el-icon-top',
            onClick: () => {
              this.topChatItem(item)
            },
          },
        ],
        event: event,
        zIndex: 3,
      })
      return false
    },

    // 会话列表置顶
    topChatItem(item) {
      setTopChatUsersChatListById({id: item.id}).then(res => {
        if (res&&res.errorCode === 0) {
          this.$store.commit('UPDATE_TALK_ITEM', {
            indexName: item.indexName,
            isTop: item.isTop == 0 ? 1 : 0,
          })
        }
      })
    },

    // 设置消息免打扰
    setNotDisturb(item) {
      setDisturbChatUsersChatList({
        talkType: item.talkType,
        receiverId: item.receiverId,
        isDisturb: item.isDisturb == 0 ? 1 : 0,
      }).then(res => {
        if (res&&res.errorCode === 0) {
          this.$store.commit('UPDATE_TALK_ITEM', {
            indexName: item.indexName,
            isDisturb: item.isDisturb == 0 ? 1 : 0,
          })
        }
      })
    },

    // 移除会话列表
    delChatItem(item) {
      deleteChatUsersChatListById({id: item.id}).then(res => {
        if (res&&res.errorCode === 0) {
          this.clearTalk()
          this.$store.commit('REMOVE_TALK_ITEM', item.indexName)
        }
      })
    },

    // 解除好友关系
    removeFriend(item) {
      removeChatFriendByFriendId({friendId: item.receiverId}).then(res => {
        if (res&&res.errorCode === 0) {
          if (this.indexName == item.indexName) {
            this.clearTalk()
          }
          this.$store.commit('REMOVE_TALK_ITEM', item.indexName)
        }
      })
    },

    // 退出群聊
    removeGroup(item) {
      secedeChatGroupByGroupId({groupId: item.receiverId}).then(res => {
        if (res&&res.errorCode === 0) {
          if (this.indexName == item.indexName) {
            this.clearTalk()
          }
          this.$store.commit('REMOVE_TALK_ITEM', item.indexName)
        }
      })
    },

    // 修改好友备注信息
    editFriendRemarks(item) {
      let title = `您正在设置【${item.realName}】好友的备注信息`
      if (item.friendRemark) {
        title += `，当前备注为【${item.friendRemark}】`
      }
      this.$prompt(title, '修改备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'border-radius0',
        inputPlaceholder: '请设置好友备注信息',
        inputValue: item.friendRemark ? item.friendRemark : item.realName,
        inputValidator(val) {
          return val == null || val == '' ? '好友备注不能为空' : true
        },
      })
        .then(({ value }) => {
          if (value == item.friendRemark) {
            return false
          }
          updateFriendRemark({
            friendId: item.receiverId,
            friendRemark: value,
          }).then(res => {
            if (res&&res.errorCode === 0) {
              this.$store.commit('UPDATE_TALK_ITEM', {
                indexName: item.indexName,
                friendRemark: value,
              })
              this.$notify({
                title: '成功',
                message: '好友备注修改成功...',
                type: 'success',
              })
            }
          })
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}

.aside-box {
  position: relative;
  border-right: 1px solid rgb(245, 245, 245);
  overflow: hidden;
  padding: 0;
  transition: width 0.3s;

  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 15px;

    .from-search {
      flex: 1 1;
      flex-shrink: 0;
      height: 40px;

      /deep/ .el-input .el-input__inner {
        border-radius: 20px;
      }
    }

    .tools {
      flex-basis: 32px;
      flex-shrink: 0;
      height: 32px;
      margin-bottom: 8px;
      margin-left: 15px;
      cursor: pointer;
      line-height: 32px;
      text-align: center;
      position: relative;
      user-select: none;

      .tools-menu {
        position: absolute;
        right: 0;
        top: 38px;
        width: 100px;
        min-height: 80px;
        box-sizing: border-box;
        background-color: rgba(31, 35, 41, 0.9);
        border-radius: 5px;
        z-index: 1;
        padding: 3px 0;

        .menu-item {
          height: 40px;
          line-height: 40px;
          color: white;
          font-size: 14px;

          &:hover {
            background-color: rgba(70, 72, 73, 0.9);
          }
        }
      }
    }
  }

  .subheader {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 3px 8px 10px;
    overflow: hidden;
    flex-shrink: 0;

    .top-item {
      flex-basis: 41px;
      flex-shrink: 0;
      height: 50px;
      margin: 0 1px 6px 1px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;

      .avatar {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        background-color: #508afe;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 10px;
        color: white;
        flex-shrink: 0;
        overflow: hidden;
        user-select: none;

        img {
          width: 100%;
          height: 100%;
          background-color: white;
        }
      }

      .name {
        font-size: 12px;
        text-align: center;
        color: #8f959e;
        transform: scale(0.84);
        text-align: center;
        line-height: 20px;
        word-break: break-all;
        overflow: hidden;

        &.active {
          color: #508afe;
        }
      }
    }

    &.shadow {
      box-shadow: 0 2px 6px 0 rgba(31, 35, 41, 0.05);
    }
  }
}

.aside-box .main {
  overflow: hidden;
  padding: 0;

  .empty-data {
    text-align: center;
    padding-top: 40px;
    color: #ccc;
  }

  .main-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 3px 10px 3px 10px;
    align-items: center;
    user-select: none;

    .title {
      font-size: 12px;
      font-weight: 600;
      color: #1f2329;
    }

    .icon {
      cursor: pointer;
    }
  }

  .talk-item {
    padding: 8px 10px;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-left: 3px solid transparent;
    transition: 0.2s ease-in;

    .avatar-box {
      height: 35px;
      width: 35px;
      flex-shrink: 0;
      background-color: #508afe;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: white;
      user-select: none;
      transition: ease 1s;
      position: relative;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        background-color: white;
        border-radius: 3px;
      }

      .top-mask {
        width: 100%;
        height: 100%;
        background-color: rgba(22, 25, 29, 0.6);
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        display: none;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }

      &:hover .top-mask {
        display: flex;
      }
    }

    .card-box {
      height: 40px;
      display: flex;
      align-content: center;
      flex-direction: column;
      flex: 1 1;
      margin: 0 0 0 10px;
      overflow: hidden;
      padding: 0 0 0 15px;

      .title {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        margin: 0px auto 0px auto;
        .card-name {
          color: #1f2329;
          font-size: 14px;
          line-height: 20px;
          flex: 1 1;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          align-items: center;
          overflow: hidden;

          .nickname {
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 3px;
          }

          .top {
            color: #dc9b04 !important;
            background-color: #faf1d1 !important;
          }

          .group {
            color: #3370ff !important;
            background-color: #e1eaff !important;
            font-size: 13px;
          }

          .disturb {
            color: #98999c !important;
            background-color: #ecedf1 !important;
            i {
              font-size: 12px;
            }
          }
        }
      }

      .card-time {
        color: #8f959e;
        font-size: 12px;
        margin-left: 10px;
        user-select: none;
      }

      .content {
        font-size: 13px;
        line-height: 18px;
        color: #8f959e;
        margin-top: 3px;
        font-weight: 300;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        span:first-child {
          margin-right: 5px;
        }

        .online-color {
          color: #4aa71c;
          font-weight: 300;
        }

        .draft-color {
          color: red;
          font-weight: 300;
        }
      }
    }

    &:hover {
      background-color: #eff0f1;
    }

    &.active {
      border-color: #3370ff;
      background-color: #eff0f1;
    }
  }
}

@media screen and (max-width: 800px) {
  .aside-box {
    width: 220px !important;

    .subheader {
      display: none;
    }

    .card-box .larkc-tag {
      display: none;
    }
  }
}
</style>
